<template>
  <div>
    <MySearch :data="searchData" :defaulValue="defaulValue" @onSeatch="onSeatch" />
    <Grid>
      <template #toolbar-tools> </template>
    </Grid>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MySearch from '#/components/MySearch/index.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

const defaulValue = ref({
  s5: 1,
  s6: ['2025-03-01', '2025-03-01']
})
const searchData = ref({
  top: {
    type: "INPUT",
    placeholder: "请输入创意名称或ID查询",
    name: "s0",
  },
  list: [
    {
      type: "INPUT",
      title: "广告",
      placeholder: "请输入广告名称或ID查询",
      name: "s1",
    },
    {
      type: "INPUT",
      title: "广告主账户",
      placeholder: "名称或ID",
      name: "s3",
    },
    {
      type: "INPUT",
      title: "公司主体",
      placeholder: "请输入",
      name: "s4",
    },
    {
      type: "GROUP",
      width: 390,
      prepend: {
        type: "SELECT",
        placeholder: "请选择",
        name: "s5",
        options: [
          { value: 1, label: "下单口径", },
          { value: 2, label: "点击口径", },
        ],
      },
      append: {
        type: "DATERANGE",
        name: "s6",
      }
    },
  ]
})

const gridOptions = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '创意名称', type: 'c1', fixed: "left", width: 200 },
    { title: '创意ID', type: 'c2', width: 400 },
    { title: '消耗', type: 'c3', width: 100 },
    { title: '转化数', type: 'c4', width: 100 },
    { title: '转化率', type: 'c5', width: 100 },
    { title: '平均千次展示成本', type: 'c6', width: 100 },
    { title: '平均点击单价', type: 'c7', width: 100 },
    { title: '账户余额', type: 'c8', width: 100 },
    { title: '回传比例', type: 'c9', width: 100 },
    { title: '下单订单数', type: 'c10', width: 100 },
    { title: 'GMV', type: 'c11', width: 100 },
    { title: '订单转化成本', type: 'c12', width: 100 },
    { title: 'GSV', type: 'c13', width: 100 },
    { title: '成交客单价', type: 'c14', width: 100 },
    { title: '成交ROI', type: 'c15', width: 100 },
    { title: '退款数', type: 'c16', width: 100 },
    { title: '当天退款率', type: 'c17', width: 100 },
    { title: '退款率', type: 'c18', width: 100 },
    { title: '退款GMV', type: 'c19', width: 100 },
  ],
  exportConfig: {},
  // height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getExampleTableApi({
          page: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});



const onSeatch = () => {
  // 
}

</script>


<style lang="scss" scoped></style>
